<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示文件</title>
    <style>
        *{
            font-family:"楷体";
            font-weight: 100;
            color:black;
            background-color: antiquewhite;
        }
        .container {
            width:400px;
            margin:0 auto;
        }
        th {
            border:1px solid;
            width:100px;
            height:50px;
        }
        textarea,button{
            width:100px;
            height:25px;
            size:20px;
            text-align: center;
        }
        textarea {
            background-color: RGB(0,0,0,0);
            border:none;
            overflow: hidden;
        }
        .del{
            background-color: brown;
        }
        .save {
            background-color: yellow;
        }
        th:hover {
            background-color: chartreuse;
        }
    </style>
    <script>
        let url='http://localhost:53000/user';
        function addValue(value){
            var th=document.createElement("th");
            var temp=document.createElement("textarea")
            temp.textContent=value;
            th.appendChild(temp);
            return th;
        }

        function adds(data){
            // 添加数据
            var tableContent=document.getElementById("main");
            var td=document.createElement('tr');
            td.id=data.id;
            td.appendChild(addValue(data.name));
            td.appendChild(addValue(data.age));
            td.appendChild(addValue(data.major));
            td.appendChild(addValue(data.grade));
            tableContent.appendChild(td);
        }

        var content=new XMLHttpRequest();
        
        content.open("GET",url,true);
        content.onreadystatechange=function(){
            if (content.readyState === 4 && content.status === 200) {
                console.log(content.responseText);
                var value=JSON.parse(content.responseText);
                for(var i=0;i<value.length;i++){
                    adds(value[i]);
                }
            }
        }
        content.send();
       
    </script>
</head>
<body>
    <div class="container">
        <table cellspacing="0" id="main">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>专业</th>
                <th>年级</th>
            </tr>
        </table>
    </div>
</body>
</html>